<link href="${rc.getContextPath()}/manage/css/dwzCustomCss/dwz.custom.css?v=${ver}" rel="stylesheet" type="text/css">
<script src="${rc.getContextPath()}/manage/js/echarts/echarts.js" type="text/javascript"></script>
<style>
#moreCondition {border：1px;
	width: 200px;
	height: 200px;
	float: center;
}

.poStatus .panel .panelHeader {
	margin: 0px;
	border-width: 0px 0px 1px 0px;
	background-color: #fff;
	background-image: none;
	padding-width: 0px;
}

.poStatus .panel .panelHeaderContent h1 {
	border-width: 0px;
}

.orderStateTable tr td {
	text-align: left;
	overflow: hidden;
	padding: 0px 10px;
	vertical-align: middle;
	line-height: 22px;
	height: 22px;
	border-top: solid 1px #f7f7f7;
	border-right: solid 1px #ededed;
}

.orderStateTable tbody tr:first-child td {
	border-top: 0px;
}

.orderStateTable tr td:first-child {
	border-top: solid 1px #f7f7f7;
	border-left: solid 1px #ededed;
	border-right: solid 1px #ededed;
}

.orderStateTable {
	border-bottom: solid 1px #ededed;
}

.orderStateTable tr th:first-child {
	border-color: #DFE4E8;
	border-style: solid;
	border-width: 1px;
}

.orderStateTable tr th {
	text-align: left;
	padding: 0px 10px;
	border-style: solid;
	border-width: 1px 1px 1px 0px;
	white-space: nowrap;
	line-height: 30px;
	border-color: #DFE4E8;
	background-color: #FAFCFC;
	color: #797E80;
	font-weight: bold;
	height: 26px;
}
</style>
<#include "/common/pagerForm.html">
<form name="productionOrderCondition" rel="pagerForm" method="post" class="required-validate" onsubmit="return navTabSearch(this)">
	<input type="hidden" id="advancedStatus" name="advancedStatus"
		value="${condition.advancedStatus!''}" />
	<div class="pageHeader">
		<div class="searchBar poStatus">
			<ul class="searchContent">
				<li><label> <@label
						key='productionOrderNum.C,colon'>生产订单编号：</@label> </label> <input
					type="text" name="productionOrderNum"
					value="${condition.productionOrderNum!''}" /></li>
				<li><label> <@label
						key='materialCode.C,colon'>物料编号：</@label> </label> <input type="text"
					name="materialCode" value="${condition.materialCode!''}" /></li>
				<li><label><@label
						key='materialText.C,colon'>物料名称：</@label> </label> <input type="text"
					name="materialText" value="${condition.materialText!''}" /></li>
			</ul>
			<ul class="searchContent">
				<li><label> <@label
						key='requirementDate.C,colon'>需求日期：</@label> </label> <input type="text"
					readonly="readonly" class="date required from" dateGroup="requirementDate" size="17"
					name="minRequirementDate"
					value="${condition.minRequirementDate!''}" /> <a
					class="inputDateButton" href="javascript:;"><@label
						key="select.B">选择</@label></a></li>
				<li><label> <@label key="to.C,colon">至：</@label> </label> <input
					type="text" class="date required to" readonly="readonly" dateGroup="requirementDate" size="17"
					name="maxRequirementDate" intervalDay="7"
					value="${condition.maxRequirementDate!''}" /> <a
					class="inputDateButton" href="javascript:;"><@label
						key="select.B">选择</@label></a></li>
				<li><label><@label
						key="orderType.C,colon">订单类型</@label></label> <select name="orderTypeCode">
						<option value=""><@label key='all.C'>所有</@label></option> <#if
						orderTypeList??&&(orderTypeList?size>0)> <#list orderTypeList as
						orderType>
						<option value="${orderType.orderTypeCode!''}"<#if
							condition.orderTypeCode==orderType.orderTypeCode>selected="selected"</#if>>${orderType.orderTypeCode!''}-${orderType.orderTypeText!''}</option>
						</#list> </#if>
				</select></li>
				<li class="query">
					<div class="buttonActive">
						<div class="buttonContent">
							<button type="submit"><@label key='query.B'>查询</@label>
							</button>
						</div>
					</div>
				</li>
				<li class="advancedQuery"><a class="link"><@label
						key="advancedQuery.C">高级查询</@label> </a> <span></span></li>
			</ul>
		</div>
	</div>
	<!-- <div class="divider"></div> -->
	<div id="collapsablePanel" style="display: none;" class="pageHeader">
		<div class="searchBar poStatus">
			<ul class="searchContent">
				<li><label> <@label
						key='createDateTime.C,colon'>创建日期从：</@label> </label> <input type="text"
					class="date" readonly="readonly" size="17"
					max_Date="{maxCreateDateTime}" name="minCreateDateTime"
					value="${condition.minCreateDateTime!''}" /> <a
					class="inputDateButton" href="javascript:;">选择</a></li>
				<li><label> <@label key="to.C,colon">至：</@label> </label> <input
					type="text" class="date" readonly="readonly" size="17"
					min_Date="{minCreateDateTime}" name="maxCreateDateTime"
					value="${condition.maxCreateDateTime!''}" /> <a
					class="inputDateButton" href="javascript:;">选择</a></li>
			</ul>
			<ul class="searchContent">
				<li><label> <@label
						key='modifyDateTime.C,colon'>修改日期从：</@label> </label> <input type="text"
					class="date" readonly="readonly" size="17"
					max_Date="{maxModifyDateTime}" name="minModifyDateTime"
					value="${condition.minModifyDateTime!''}" /> <a
					class="inputDateButton" href="javascript:;">选择</a></li>
				<li><label> <@label key="to.C,colon">至：</@label> </label> <input
					type="text" class="date" readonly="readonly" size="17"
					min_Date="{minModifyDateTime}" name="maxModifyDateTime"
					value="${condition.maxModifyDateTime!''}" /> <a
					class="inputDateButton" href="javascript:;">选择</a></li>
			</ul>
			<ul class="searchContent">
				<li><label> <@label
						key='productionLot.C,colon'>生产批次：</@label> </label> <input type="text"
					name="productionlotNum" value="${condition.productionlotNum!''}" />
				</li>
				<li><label> <@label
						key='createUser.C,colon'>创建人：</@label> </label> <input type="text"
					name="createUser" value="${condition.createUser!''}" /></li>
				<li><label> <@label
						key='modifyUser.C,colon'>修改人：</@label> </label> <input type="text"
					name="modifyUser" value="${condition.modifyUser!''}" /></li>
			</ul>
			<ul class="searchContent">
				<li><label> <@label
						key='customer.C,colon'>客户：</@label> </label> <input type="text"
					name="customer" value="${condition.customer!''}" />
				</li>
				<li><label> <@label
						key='customerOrder.C,colon'>客户订单：</@label> </label> <input type="text"
					name="customerOrder" value="${condition.customerOrder!''}" /></li>
				<li><label> <@label
						key='priority.C,colon'>优先级：</@label> </label> <input type="text"
					name="priority" class="digits" value="${condition.priority!''}" /></li>
			</ul>
		</div>
	</div>
</form>
<div class="panel">
	<h1 style="text-align: left;"><@label key="graph.D">图表</@label></h1>
	<div id="chartContent" class="poStatus" layoutH="118">
		<div layoutH="150" style="float: left; display: block; margin-left: 10px; min-height: 330px;">
			<div>
				<div style="height: 36px;">
					<h1 style="line-height: 36px; color: #666; font-size: 12px;">
					<@label	key="orderStatus.C">订单状态</@label>
					</h1>
				</div>
				<table class="orderStateTable" id="orderStateTable" width="388px">
					<thead>
						<tr>
							<th width="30%"><@label key="orderStatus.C">订单状态</@label></th>
							<th width="30%"><@label key="quantity.C">数量</@label></th>
							<th width="30%"><@label key="percentage.C">百分比</@label></th>
						</tr>
					<tbody>
						<#if orderStatuseCode??> 
						<#list orderStatuseCode as ecode>
						<tr>
							<td>
								<a name="orderStatusName" class="link" status="${ecode.eCode!''}">${ecode.eCodeText!''}</a>
							</td>
							<td name="orderStatusCount">${orderStatusMap[ecode.eCode]!0}</td>
							<td>
								<#if orderStatusMap.totalCount == 0>
								0%
								<#else>
								${((orderStatusMap[ecode.eCode]!0) / orderStatusMap.totalCount!1)?string.percent}
								</#if>
							</td>

						</tr>
						</#list>
						</#if>
						<tr>
							<td><@label key="totalCount.C">合计</@label></td>
							<td>${orderStatusMap.totalCount}</td>
							<td>
								<#if orderStatusMap.totalCount == 0>
								0%
								<#else>
								100%
								</#if>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
			<div>
				<div style="height: 36px;">
					<h1 style="line-height: 36px; color: #666; font-size: 12px;"><@label
						key="uncompletedOrder.C">逾期未完工的订单</@label></h1>
				</div>
				<table class="orderStateTable" id="unConfirmOrderTable" width="388px">
					<thead>
						<tr>
							<th width="40%"><@label key="quantity.C">数量</@label></th>
							<th width="40%"><@label key="percentage.C">百分比</@label></th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td><a href="javascript:void(0);" class="link"
								id="UncompletedOrderQuantity">${orderStatusMap['uncompleteCount']!0}</a>
							</td>
							<td>
								<#if orderStatusMap.totalCount == 0>
								0%
								<#else>
								${((orderStatusMap['uncompleteCount']!0)/orderStatusMap.totalCount!1)?string.percent}
								</#if>
							</td>
						</tr>
					</tbody>
				</table>

			</div>
		</div>
		<div style="margin-left: 446px; padding: 10px;">
			<div id="chartHolder" style="width: 450px; height: 360px;" ></div>
		</div>
	</div>
</div>
<script type="text/javascript">
(function($){
	var $page = DWZ.context(),
	orderStatusJSONData = JSON.parse('<#noescape>${orderStatusJSON!"[]"}</#noescape>'),
	statusdata = new Array(),
	statusName = new Array(),
	axisLine = { //图表坐标轴线
  		show: true,
  		lineStyle: {
  			color: '#666',
  			type: 'solid',
  			width: 1
  		}
  	},
  	viewProductionOrders = function(status, text) {
		var $form = $("form[name='productionOrderCondition']", $page),
		data = $form.serialize(),
		path = hostUrl
			+ "/productionOrderStatus/viewProductionOrdersByStatus?"
			+ data,
		title = "逾期完工";
		if (status) {
			title = text;
			path += ('&statuseCode=' + status);
		}
		$.pdialog.open(path, '', title, {
			width : 860,
			height : 560,
			minable : false,
			mask : true,
			resizable : false
		});
	};
	
	$('td a[name=orderStatusName]', $page).on('click', function(){
		var $this = $(this);
		viewProductionOrders($this.attr('status'), $this.text());
		return false;
	}).each(function(){
		statusName.push($(this).text());
	});
	
	$('#UncompletedOrderQuantity', $page).on('click', function(){
		viewProductionOrders($(this).attr('status'));
		return false;
	});
	
	$("td[name='orderStatusCount']", $page).each(function(){
		statusdata.push($(this).text());
	});
	
	var ops = {
		color : [ '#93d1f8', '#dea2ad' ],
		title : {
			text : '<@label key="productionOrderStatus.C">订单状态</@label>',
			x : 'center',
			textStyle : {
				fontSize : 12,
				color : '#666'
			}
		},
		tooltip : {
			trigger : 'item'
		},
		grid : {
			borderWidth : 0,
			left: '3%',
	        right: '4%',
	        bottom: '3%',
	        containLabel: true
		},
		animation : false,
		xAxis : [ {
			type : 'category',
			show : true,
			axisLabel : {
				show : true
			},
			axisLine : axisLine,
		} ],
		yAxis : [ {
			type : 'value',
			show : true,
			axisLine : axisLine
		} ],
		series : [ {
			type : 'bar',
			itemStyle : {
				normal : {
					label : {
						show : true,
						symbol : 'diamond',
						position : 'top',
						formatter : '{c}',
						textStyle : {
							fontSize : 12,
							color : '#71c76e',
						}
					},
				}
			},
			markPoint : {
				tooltip : {
					trigger : 'item',
					backgroundColor : 'rgba(0,0,0,0)',
				},
				data : []
			}
		} ],
		noDataLoadingOption : {
			text : "<@label key='productionOrderStatus.C,noData.C'>订单状态暂无数据</@label>",
			effect : 'whirling',
		}
	};

	require.config({
		paths : {
			echarts : '${rc.getContextPath()}/manage/js/echarts'
		}
	});

	require([ 'echarts', 'echarts/chart/bar' ], function(ec) {
		var myChart = ec.init($('#chartHolder', $page)[0]);
		ops.xAxis[0].data = statusName;
		ops.series[0].data = statusdata;
		myChart.setOption(ops, true);
		var imgData = myChart.getDataURL();
	});
	
	var $collapsablePanel = $("#collapsablePanel", $page),
	$chartContent = $('#chartContent', $page),
	$advancedQuery = $('.advancedQuery', $page).on('click', function(){
		if ($collapsablePanel.is(':animated')) {
			return false;
		}
		
		var status = '', contentHeight = $chartContent.height();
		
		if ($collapsablePanel.is(':visible')) {
			$collapsablePanel.slideUp();
			status = "close";
			$(this).removeClass('expand');
			$chartContent.animate({
				height: contentHeight + 131
			}).attr({layoutH: 118});
		} else {
			$collapsablePanel.slideDown();
			status = "open";
			$(this).addClass('expand');
			$chartContent.animate({
				height: contentHeight - 131
			}).attr({layoutH: 249});
		}
		$('#advancedStatus', $page).val(status);
	});
	
	if ($('#advancedStatus', $page).val() == 'open') {
		$collapsablePanel.show();
		$advancedQuery.addClass('expand');
		$chartContent.attr({layoutH: 249});
	}
})(jQuery);
</script>



